/* my edits */

#img2img_results, #txt2img_results, #extras_results {
    position: unset !important;
}

.gradio-row.resize-handle-row.svelte-sa48pu.unequal-height {
    display: flex !important;
    flex-direction: row !important;
}

.extra-network-pane .card, .standalone-card-preview.card {
    width: 4.5rem !important; 
    height: 6.75rem !important; 
    font-size: 50% !important; 
}

.edit-user-metadata{
    width:unset !important;
}

.extra-network-control{
    flex-wrap: wrap;
}

/* 1. PARENT: Stack items Vertically (Top to Bottom) */
.gradio-row.resize-handle-row {
    display: flex !important;
    flex-direction: column !important; /* This forces the "Row by Row" stacking */
    height: auto !important; /* Allow it to grow as tall as needed */
}

/* 2. CHILD: Results (The Top Row) */
#txt2img_results, 
#img2img_results, 
#extras_results {
    order: 1 !important;
    width: 100% !important; /* Force full width */
    min-width: 100% !important;
    flex-basis: auto !important;
}

/* 3. CHILD: Settings (The Bottom Row) */
.settings-wrap {
    order: 3 !important;
    width: 100% !important; /* Force full width */
    flex-basis: auto !important;
}

/* 4. HIDE the Resize Handle */
/* (The vertical handle is useless in this stacked layout) */
.gradio-row.resize-handle-row > .resize-handle {
    display: none !important;
}
.copy-path-button.card-button{
    display: none !important;
}
.extra-network-pane .card .button-row{
    width: 90px !important;
}